import React, {useEffect, useState} from 'react';
import { useHistory } from "react-router-dom";

import Txt from "../../../components/txt/Txt";

import http from "../../../model/http";
import {PullToRefresh} from "antd-mobile";
import './project.less';
import Header from "../../../components/header/Header";
let page = 1;
const h = document.documentElement.clientHeight - 40;
function Project() {
  const history = useHistory();
  const [list,setList] = useState([]);
  const [load,setLoad] = useState(false);
  const getList = ()=>{
    (async ()=>{
      setLoad(true);
      const _list = await http.post('/customer/checkCustomerScheduleTrInfo',{
        customerCrmId:history.location.state.customerCrmId, page:page,items:20
      })
      setTimeout(()=>{setLoad(false)},800)
      if(!_list.data.length) return;
      page++;
      setList([...list,..._list.data]);
    })()
  }

  useEffect(()=>{
    list.length || getList();

    return ()=>{
      page=1
    }
    // eslint-disable-next-line
  },[])

  const doctor =(item)=>{
    // history.push('/yuyue/edit2',{
    //   outUser:history.location.state,
    //   item:item
    // });
    history.push('/yuyue/project/frequency',{
      outUser:history.location.state,
      item:item
    });

    
  }
 

  return (
    <div className='v-yuyue-project'>
      <div className="body-background-div"></div>
      <PullToRefresh direction='up' onRefresh={getList} refreshing={load} style={{height:h, overflow:'auto'}}>

          <Txt className='g-mb10'>
            <i className='iconfont iconzhuyi g-f12'></i>
            &nbsp;以下为顾客已缴费但未使用的项目，点击选择即可
          </Txt>
          {/* i.displayname */}
          {list.map((i,idx)=>(
              <div className='v-p18 g-bdrs12 g-bg-f g-mb10 card-box' onClick={()=>{doctor(i)}}>
                <p className='g-f14 g-mb10 card-box-title' dangerouslySetInnerHTML={{ __html: i.displayname}}></p>
                <p className='v-lh20 g-c8 v-f13 card-box-p'>总收费：{i.totalFee}元&emsp;总次数：{i.allzcs}次&emsp;剩余次数：{i.allwzcs}次</p>
                <p className='v-lh20 g-c8 v-f13 card-box-p'>开单时间：{i.wxwork_charge_date}</p>
              </div>
          ))}
      </PullToRefresh>
      <Header />
    </div>
  )
}
// crdId --- serviceId
// tb_customer_id --- customerCrmId
// hosId 
export default Project;